<template>
	<view style="width: 750rpx;height: 100vh;" class="flex flex-column">
		<view class="flex border-bottom border-light-secondary" style="height: 100rpx;">
			<view
				v-for="(item, index) in tabItems"
				:key="item.index"
				class="flex-1 flex flex-column align-center justify-center"
				:class="tabrIndex === index ? 'text-main' : ''"
				@click="changeTab(index)"
			>
				<text class="font-md">{{ item.name }}</text>
				<text
					style="height: 8rpx;width: 30rpx;"
					class="rounded"
					:class="tabrIndex == index ? 'bg-main' : 'bg-white'"
				></text>
			</view>
		</view>
		<!-- 滑动列表 -->
		<swiper
			:duration="1000"
			class="flex-1 flex"
			:current="tabrIndex"
			@change="changeTab($event.detail.current)"
		>
			<swiper-item class="flex-1 flex" v-for="(item, index) in tabItems" :key="item.name">
				<scroll-view scroll-y="true" class="flex-1">
					<!-- 下载列表 -->
					<template v-if="index === 0">
						<view
							style="height: 60rpx;"
							class="bg-light flex align-center font-sm px-3 text-muted"
						>
							文件下载至: storage/xxxx/xxxx
						</view>
						<!-- 下载中列表组件 -->
						<view
							class="flex align-center bg-white font py-2 px-3 border-bottom text-muted"
							style="height: 60rpx;line-height:60rpx;"
						>
							下载中({{ dowing.length }})
						</view>
						<f-list
							v-for="(item, index) in dowing"
							:key="index"
							:item="item"
							:index="'i' + index"
							:showChecked="true"
						>
							<view class="flex align-center justify-center text-main">
								<text class="iconfont icon-zanting"></text>
								<text class="ml-1">{{ item.progress }}%</text>
							</view>
							<progress
								slot="bottom"
								:percent="item.progress"
								:stroke-width="2"
								activeColor="#009CFF"
							/>
						</f-list>
						<!-- 下载完成 -->
						<view
							class="flex align-center bg-white font py-2 px-3 border-bottom text-muted"
							style="height: 60rpx;line-height:60rpx;"
						>
							下载完成({{ dowed.length }})
						</view>
						<f-list
							v-for="(item, index) in dowed"
							:key="index"
							:item="item"
							:index="'d' + index"
							:showChecked="false"
						></f-list>
					</template>
					<!-- 上传列表 -->
					<template v-else-if="index === 1">
						<view
							style="height: 60rpx;"
							class="bg-light flex align-center font-sm px-3 text-muted"
						>
							文件上传至: 云端
						</view>
						<!-- 下载中列表组件 -->
						<view
							class="flex align-center bg-white font py-2 px-3 border-bottom text-muted"
							style="height: 60rpx;line-height:60rpx;"
						>
							上传中({{ uploing.length }})
						</view>
						<f-list
							v-for="(item, index) in uploing"
							:key="index"
							:item="item"
							:index="'i' + index"
							:showChecked="true"
						>
							<view class="flex align-center justify-center text-main">
								<text class="iconfont icon-zanting"></text>
								<text class="ml-1">{{ item.progress }}%</text>
							</view>
							<progress
								slot="bottom"
								:percent="item.progress"
								:stroke-width="2"
								activeColor="#009CFF"
							/>
						</f-list>
						<!-- 上传 -->
						<view
							class="flex align-center bg-white font py-2 px-3 border-bottom text-muted"
							style="height: 60rpx;line-height:60rpx;"
						>
							上传完成({{ uploed.length }})
						</view>
						<f-list
							v-for="(item, index) in uploed"
							:key="index"
							:item="item"
							:index="'d' + index"
							:showChecked="false"
						></f-list>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import fList from '@/components/common/f-list.vue'
import { mapState } from 'vuex'
export default {
	components: { fList },
	data() {
		return {
			tabrIndex: 0,
			tabItems: [{ name: '下载列表' }, { name: '上传列表' }]
		}
	},
	methods: {
		changeTab(index) {
			this.tabrIndex = index
		}
	},
	computed: {
		...mapState({
			uploadList: state => state.uploadList,
			downloadList: state => state.downloadList
		}),
		uploing() {
			return this.uploadList.filter(item => item.progress < 100)
		},
		uploed() {
			return this.uploadList.filter(item => item.progress === 100)
		},
		dowing() {
			return this.downloadList.filter(item => item.progress < 100)
		},
		dowed() {
			return this.downloadList.filter(item => item.progress === 100)
		}
	},
	onNavigationBarButtonTap() {
		uni.showModal({
			content: '是否要清除传输记录?',
			success: res => {
				if (res.confirm) {
					this.$store.dispatch('clearList')
					uni.showToast({
						title: '清除成功',
						icon: 'none'
					})
				}
			}
		})
	}
}
</script>

<style></style>
